iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0

挑戰目標: MockNative Camp


今天要來實作Nav Detail的部分,
https://ithelp.ithome.com.tw/upload/images/20210926/201403589F8Ca0PNVe.png
昨天將相關的List放到了config中,也可以成功的hover該tab後出現下面的Detail,
https://ithelp.ithome.com.tw/upload/images/20210926/20140358xIGyasRL3p.png
透過Tailwinds CSS來設計版型,但因為時間的關係,沒有辦法刻的一模一樣,我希望可以在30天內至少把首頁給Mock完,所以先做到這樣,有時間的話再來回頭調整版型,這是今天實作的結果。
NavDetail.js

import getConfig from 'next/config'

function NavDetail({ tab }) {

    const { publicRuntimeConfig } = getConfig();

    return (
        <div className="flex flex-row justify-between items-center w-4/6 border-r border-b border-l ml-60">
            {publicRuntimeConfig.navDetails[tab]?.map(({ name, list }) =>
            (
                <div className="flex flex-col items-center mr-8 ml-8">
                    <div className="border-b  w-full m-2 border-nativeCamp-nav-textHov pb-2">
                        <div className="border-l-4 border-nativeCamp-nav-textHov text-nativeCamp-nav-text">&ensp;{name}</div>
                    </div>
                    <div className="items-center">
                        {list?.map(data => (
                            <div className="text-nativeCamp-nav-text flex items-center flex-row">
                                <div class="w-2  overflow-hidden inline-block m-2">
                                    <div class="h-6  bg-nativeCamp-nav-textHov rotate-45 transform origin-top-left"></div>
                                </div>
                                <span className="pb-3 text-sm">{data}</span>
                            </div>
                        ))}
                    </div>
                </div>
            )
            )}
        </div>
    )
}

export default NavDetail

https://ithelp.ithome.com.tw/upload/images/20210926/20140358VoQA9wAynm.png
明天繼續往下作,會先做Footer。


上一篇
[Day 10]怎麼每天都像在趕末班電車R(前端篇)
下一篇
[Day 12]我也好想成為時間管理大師(前端篇)
系列文
關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言